<template>
    <view class="coupon-item mb-24 br-16 column ft-24 pr-16 pb-20">
        <!-- 这是一些优惠券状态的图片，如果后续不需要则可以直接删除 -->
        <view class="img" v-if="data.id == 1">
            <hj-image mode="aspectFill" src="used-02.png" width="100%" height="100%" />
        </view>
        <view class="coupon-top w100 space-between pt-10">
            <view class="coupon-in pr-20 pt-16">
                <view class="amount bold"
                    ><text class="no-bold ft-24 t-3 amount-text">￥</text>10</view
                >
                <view class="mt-10">无金额门槛</view>
            </view>
            <view class="flex-auto pt-16">
                <view class="ft-26 lh-40"
                    ><text class="tab mr-10 ft-22 t-w">现金券</text>三类视距学费现金抵扣券</view
                >
                <view class="ft-22 t-9 mt-12">
                    {{ timeFormat('2018-04-11 10:00:00') }}至
                    {{ timeFormat('2018-05-11 10:00:00') }}
                </view>
            </view>
        </view>
        <view class="coupon-bot w100 mt-6 space-between align-center">
            <view class="pl-20">仅限购买工厂店商品</view>
            <view class="coupon-bot-but t-w center ft-22" @click="handleUse(data)">立即使用</view>
        </view>
    </view>
</template>

<script setup>
/**
 * @description 优惠券列表项组件
 * @author yinzhi
 * @date 2025-03-12
 * @param {Object} data 优惠券数据
 */
import dayjs from 'dayjs' // 导入 dayjs
import { ref, defineComponent } from 'vue'
defineComponent({
    name: 'ColumnItem'
})

const props = defineProps({
    data: {
        type: Object,
        default: () => ({})
    }
})

const emit = defineEmits()

// 立即使用按钮点击事件
const handleUse = item => {
    emit('handleUse', item)
}

/**
 * @description 时间格式处理 直接调用dayjs中的方法
 * @param {String} date 可以是时间戳(秒/毫秒)或者日期+时间的字符串
 */
const timeFormat = date => {
    if (!date) {
        return ''
    }
    return dayjs(date).format('YYYY.MM.DD') || ''
}
</script>

<style scoped lang="scss">
.coupon {
    &-in {
        min-width: 230rpx;
        text-align: center;
        .amount {
            font-size: 76rpx;
            line-height: 1;
            &-text {
                margin-right: -4rpx;
            }
        }
    }
    &-item {
        display: flex;
        background: rgba(232, 209, 15, 0.45);
        box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 6px 0px;
        border: 1px solid #999;
        position: relative;
        .img {
            position: absolute;
            right: 0;
            top: 0;
            z-index: 20;
            width: 80rpx;
            height: 80rpx;
        }
        .tab {
            background: #e82050;
            height: 34rpx;
            line-height: 34rpx;
            padding: 0 12rpx;
            display: inline-block;
            vertical-align: top;
            margin-top: 3rpx;
        }
    }
    &-bot {
        &-but {
            height: 48rpx;
            background: #e82050;
            border-radius: 24rpx;
            line-height: 1;
            padding: 0 20rpx;
            position: relative;
            z-index: 20;
        }
    }
}
</style>
